<template>
  <el-scrollbar :ref="changeRef" noresize wrap-class="z-scrollbar-wrap" v-bind="getBindValue">
    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps"></slot>
    </template>
  </el-scrollbar>
</template>

<script setup lang="ts">
import type { ZScrollbarInstance, ZScrollbarProps } from '../types'

defineOptions({ name: 'ZScrollbar', inheritAttrs: false })

const props = withDefaults(defineProps<ZScrollbarProps>(), {})

const vm = getCurrentInstance()
const getBindValue = computed(() => {
  const delArr: string[] = []
  const attrs = useAttrs()
  const obj = { ...attrs }
  Object.assign(obj, props)
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const changeRef = (ScrollbarInstance: Record<string, any> | null) => {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(
      ScrollbarInstance || {},
      {} // 这里写暴露的方法
    ) as ZScrollbarInstance
  }
}
</script>

<style lang="scss">
.el-scrollbar__thumb {
  @include useTheme {
    background: getStyle(--z-color-primary);
  }
}
</style>
